import React, { useState, useEffect } from 'react';
import { useHistory, useParams } from "react-router-dom";
import axios from "axios";
// const urlPrefix = 'http://192.168.0.103:8802/';
const urlPrefix = 'https://wx.gxfishing.com/';

/* 处理数据 */
function getdata(id, setclassItem) {
    const imgPrefix = 'http://bird.gxfishing.com/';
    axios({
        method: 'POST',
        url: urlPrefix + 'common/listAttendClass',
        headers: {
            'Access-Control-Allow-Origin': '*',
        }
    })
        .then(res => {
            if (res.status == 200 && res.data.code == 0) {
                let item;
                for (let i of res.data.data) {
                    if (i.id === id) {
                        item = i;
                        break;
                    }
                }
                console.log(item)
                item.pic = imgPrefix + item.pic;
                setclassItem(item);
            }
        })
        .catch(e => { console.warn(e) })
}

function ClassShow(props) {
    let { classname } = useParams();
    const topHeight = {
        height: "50px"
    };
    const [Merber, setMerber] = useState(true);
    const [classItem, setclassItem] = useState({})
    const baoming = (e) => {
        e.preventDefault();
        e.persist();
        let form = document.getElementsByTagName('form')[0];
        // console.log(form);
        if(form){
            let _input = form.getElementsByTagName('input');
            let name = _input[0].value;
            let age = _input[1].value;
            let phone = _input[2].value;
            // console.log(name,age,phone)
            if(phone.length !== 11){
                failError('手机号码不对');
                return;
            }
            if(name.length < 2){
                failError('请输入学生名字');
                return;
            }
            let str = '?name=' + name + "&phone=" + phone;
            if(age){ str += '&age=' + age; };
            if(Merber){ str += '&bird=' + 'true'; }
            else{ str += '&bird=' + 'false'; }
            str += '&classId=' + classItem.id;
            axios({
                method:'POST',
                url: urlPrefix + 'common/saveAttend' + str,
            })
            .then( d => {
                // console.log(d)
                if(d.status === 200 && d.data.code === 0){
                    alert('报名成功');
                }else{
                    failError(d.data.message);
                }
            })
            .catch( e => {
                failError();
                console.warn(e);
            })
        }else{
            failError();
            return;
        }
    }
    const failError = (msg) => {
        let _msg = '提交出错';
        if(msg){ _msg = msg; }
        alert(_msg)
    }
    const toPic = (url) => {
        location.assign(url);
    }
    useEffect(() => {
        getdata(classname, setclassItem);
        setTimeout(() => {
            // console.log(window.screen.availHeight);
            const content = document.getElementsByClassName('content')[0];
            // console.log(content)
            let diff = window.innerHeight - content.getBoundingClientRect().height - 50;
            document.getElementsByClassName('img-show')[0].style.height = diff + 'px';
        }, 120);
        return () => {
        };
    }, [])
    return (
        <div className="classes-page">
            <div className="nav-top" style={topHeight}>
                <div className="title">{classItem.name}</div>
            </div>
            <div className="img-show" onClick={() => { toPic(classItem.pic) }}>
                <div className="img-wrap">
                    <img src={classItem.pic} alt="" />
                </div>
            </div>

            <div className="content">
                <form onSubmit={baoming}>
                    <div className="wrap">
                        <div className="input-block">
                            <div className="isMember">
                                {/* <div className="ques">是否飞鸟学员?</div> */}
                                <div className={Merber ? "btn yes" : "btn"} onClick={() => { setMerber(true) }}>是飞鸟学员</div>
                                {/* <div className="ques">/</div> */}
                                <div className={!Merber ? "btn yes" : "btn"} onClick={() => { setMerber(false) }}>不是飞鸟学员</div>
                            </div>
                            <input className="u-input" type="text" maxLength="6" placeholder="请输入学生姓名" name="name" required />
                            <input className="u-input" type="number" placeholder="学生年龄" name="age" />
                            <input className="u-input" type="text" maxLength="11" placeholder="联系电话" name="phone" required />
                        </div>
                        <div className="qrcode">
                            <div className="qrtext">具体请添加微信</div>
                            <div className="img-box">
                                <img src="https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=829888290,2650878176&fm=74&app=80&f=JPG&size=f121,121?sec=1880279984&t=274501980523d63a7d93c94f85aabbab" alt="" />
                            </div>
                        </div>
                    </div>
                    <button type="submit" className="submit-btn">报名</button>
                </form>
            </div>
        </div>
    )
}

export default ClassShow;

